<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${_front_title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico"/>
    <link rel="stylesheet" href="/static/front/fonts/iconfont.css">
    <link rel="stylesheet" href="/static/front/css/base_new.css">
    <link rel="stylesheet" href="/static/front/css/library.css">
    <link rel="stylesheet" href="/static/front/css/style.css">
    <link rel="stylesheet" href="/static/front/css/box.css">
    <script src="/static/front/js/jquery-1.11.1.min.js"></script>
    <script src="/static/front/js/jquery.countdown.js"></script>
    <script src="/static/front/js/js.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/front/js/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="plugIn/PIE.js"></script>
    <![endif]-->
    <style type="text/css">
       .investment .quick_screen{display:inline;}
       .investment .quick_screen:after{display:block;content:'';overflow:hidden;width:0;height:0;celar:both;}
       .investment .quick_screen span{margin-top:12px;margin-left:25px;}
       .investment .screen ul li{float:left;margin:8px 5px;}
       .investment .screen ul li a{display:inline;padding:3px 10px;}
       .investment .screen ul li a.current{background:#6DBD45;color:#fff;}
       .investment .screen ul li a:hover{background:#6DBD45;color:#fff;}
       
       .Tab .Tab-shuaixuan{float:right;margin-top:-40px;cursor:pointer;width: 78px;height: 25px;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;
    	-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:25px;}
   		
   		.investment .quick_sxtj{margin-left:20px;}
   		.investment .quick_sxtj ul.clearfix li{font-size:12px;}
   		.investment .quick_sxtj ul.clearfix li input{border:1px solid #ccc;height:25px;}
   		.investment .quick_sxtj ul.clearfix li .quick_btn{width:50px;height:27px;border: #4db0c2 1px solid;background: #5dc0d2;color: #fff;border-radius: 3px;-webkit-border-radius: 3px;
   		-moz-border-radius: 3px;-ms-border-radius: 3px;text-align: center;behavior: url(plugIn/PIE.htc);line-height:26px;cursor:pointer;margin-left:20px;}
   		
   		/** 加载图片插件的样式 **/
   		.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:19899999;width:100%;height:100%;_padding:0 20px 0 0;background:#f6f4f5;display:none;}
		.showbox{position:fixed;top:0;left:50%;z-index:19899999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}
		*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
		*html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
		#AjaxLoading{border:1px solid #8CBEDA;color:#37a;font-size:12px;font-weight:bold;}
		#AjaxLoading div.loadingWord{width:200px;height:50px;line-height:50px;border:2px solid #D6E7F2;background:#fff;}
		#AjaxLoading img{margin:10px 15px;float:left;display:inline;}
      </style>
      <script>
       window.onload=function(){
       		var h = $('.screen').height();
	     	if(h==0){
	     		$('.screen').css('border','none')
	     	};
	      	$('.Tab-shuaixuan').click(function(){
	      		var h = $('.screen').height();
	      		if(h==0){
	      			$('.screen').css({
	      				'borderTop':'1px dashed #ccc',
	      				borderLeft:'1px solid #e1e1e1',
	      				borderRight:'1px solid #e1e1e1'
	      			}).animate({
	      				height:50
	      			});
	      		}else{
	      			$('.screen').animate({
	      				height:0
	      			},function(){
	      				$('.screen').css('borderTop','none');
	      			});
	      		};
	      	});
       };
     	
      </script>
</head>
<body>
    <!-- 头部 开始 -->
    <div id="header">
		<#include "../base/top.ftl" />
	</div>
	<!-- 头部 结束 -->
    <div class="content">
    <div id="myInvestmentMain" class="cnt clearfix layoutMain">
       <#include "base1.ftl" />
        <div class="investment fr">
            <h2>我的还款</h2>
            <div class="Tab" style="margin-top: 48px;">
                <span data="pay" class="TabOne tableTab <#if type?? && type=='pay'>active</#if>">还款中</span>
                <span data="complete" id＝"complete" class="TabTwo tableTab <#if type?? && type=='complete'>active</#if>">已完成</span>
                <span class='Tab-shuaixuan'>快速筛选</span>
                <div class="screen" style="border-top:1px dashed #ccc;width:100%;height:0px;overflow:hidden;">
                	<div class='quick_sxtj'>
                		<ul class="clearfix">
                            <li>查询时间：
                                <input type="text" id="publishTimeBegin1" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" placeholder="请选择开始还款时间" value="<#if publishTimeBegin?exists>${publishTimeBegin}</#if>">&nbsp;&nbsp; 到&nbsp;&nbsp;
                                <input type="text" id="publishTimeEnd1" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:'readOnly'})" value="" placeholder="请选择结束还款时间" value="<#if publishTimeEnd?exists>${publishTimeEnd}</#if>">
                            </li>
                            <li>类型：
                                <select name="applyType" id="applyType">
                                    <option value="-1">所有</option>
                                    <option value="3" <#if productId?exists && productId==3>selected="true"</#if>>车贷E通</option>
                                    <option value="4" <#if productId?exists && productId==4>selected="true"</#if>>车商贷</option>
                                    <option value="5" <#if productId?exists && productId==5>selected="true"</#if>>房E贷</option>
                                    <option value="6" <#if productId?exists && productId==6>selected="true"</#if>>商易贷</option>
                                    <option value="7" <#if productId?exists && productId==7>selected="true"</#if>>抵押贷</option>
                                    <option value="10" <#if productId?exists && productId==10>selected="true"</#if>>项目贷</option>
                                    <!--<option value="8" <#if productId?exists && productId==8>selected="true"</#if>>担保标</option>-->
                                </select>
                            </li>
                            <li>
                                <input type="button" class='quick_btn' value="搜 索" id="search">
                            </li>
                        </ul>
                	</div>
                </div>
              	<script>
	             	var h = $('.screen').height();
	             	if(h==0){
	             		$('.screen').css('border','none')
	             	};
	              	$('.Tab-shuaixuan').click(function(){
	              		var h = $('.screen').height();
	              		if(h==0){
	              			$('.screen').css({
	              				'borderTop':'1px dashed #ccc',
	              			}).animate({
	              				height:45
	              			});
	              		}else{
	              			$('.screen').animate({
	              				height:0
	              			},function(){
	              				$('.screen').css('borderTop','none');
	              			});
	              		};
	              	});
			       	<#if (publishTimeBegin?exists && publishTimeBegin != '') || (publishTimeEnd?exists && publishTimeEnd != '') || (productId?exists && productId !=-1)>
						$(".Tab-shuaixuan").click();
					</#if>
			      </script>
                <table class="tabLibrary receivables" border="0" cellspacing="0" cellpadding="0" style='margin-top: 0px;display:block;'>
                    <tbody style='display:block;'>
	                    <tr>
	                        <th class="one" style="width:245px;float:left;">标题</th>
	                        <th class="two" style="width:80px;float:left;">借款类型</th>
	                        <th class="three" style="width:179px;float:left;">借款金额</th>
	                        <th class="four" style="width:80px;float:left;">还款期限</th>
	                        <th class="six" style="width:161px;float:left;">未还本息</th>
	                        <th class="eight" style="width:140px;float:left;">已还本息</th>
	                        <th class="nine" style="width:91px;float:left;">操作</th>
	                    </tr>
                   			<#if (pageInfo?? & pageInfo.pageList?size>0)>
                                <#list pageInfo.pageList as model>
				                    <tr class="clearfix">
				                        <td class="one" style="text-align:-webkit-center;width:245px;float:left;padding:0;height:55px;line-height:55px;">
				                        	<#if model.title?exists>${model.title}</#if>
				                        </td>
				                        <td class="two" style="width:80px;float:left;padding:0;height:55px;line-height:55px;">
				                        	<#if listProduct?exists>
				                        		<#list listProduct as product>
				                        			<#if product.id?? && model.productId?? && product.id == model.productId>${product.name}</#if>
				                        		</#list>
				                        		<#else>...
				                        	</#if>
				                        </td>
				                        <td class="three" style="width:179px;float:left;padding:0;height:55px;line-height:55px;">
											￥<#if model.amount?exists>${model.amount?string(",###.00")}</#if>
				                        </td>
				                        <td class="four" style="width:80px;float:left;padding:0;height:55px;line-height:55px;">
				                        	<#if (model.dateUtil?exists) & model.dateUtil == "MONTH">
                            					<#if model.deadline?exists>${model.deadline}个月</#if>
                            				<#elseif (model.dateUtil?exists) & model.dateUtil == "DAY">
                            					<#if model.deadline?exists>${model.deadline}天</#if>
                            				<#elseif (model.dateUtil?exists) & model.dateUtil == "YEAR">
                            					<#if model.deadline?exists>${model.deadline}年</#if>
                            				</#if>
			                        	</td>
				                      	<td class="six" style="width:161px;float:left;padding:0;height:55px;line-height:55px;">
				                      		￥<#if model.notPaymentTotal?exists>${model.notPaymentTotal?string(",##0.00")}</#if>
				                      	</td>
                            			<td class="eight" style="width:140px;float:left;padding:0;height:55px;line-height:55px;"> 
                            				￥<#if (model.paymentTotal?exists)>${model.paymentTotal?string(",##0.00")}</#if>
                            			</td>
                            			<td class="nine" style="width:91px;float:left;padding:0;height:55px;line-height:55px;">
                            				<#if (model.status?exists) & (model.status=="pay")>
                            					<input type='button' style="height:27px;width:53px;border-radius:2px;border:#4db0c2 1px solid;background: #5dc0d2;color: #fff;cursor:pointer;" value='还款' class='' onclick='borrowDetail("${model.borrowId}","${model.userId}")'/>
                            				<#elseif (model.status?exists) & (model.status=="complete")>
                            					<input type='button' style="height:27px;width:53px;border-radius:2px;border:#4db0c2 1px solid;background: #5dc0d2;color: #fff;cursor:pointer;" value='查看' class='' onclick='borrowDetail("${model.borrowId}","${model.userId}")'/>
                            				</#if>
                        				</td>
				                    </tr>
			                    </#list>
			                <#else>
			                	<tr style='display:block;'><td rowspan="9" style="display: block;width:100%;height:30px;">暂无数据</td></tr>
		                    </#if>
                	</tbody>
                </table>
            </div>
            <!-- 分页组件 -->
           <#if (pageInfo??) & (pageInfo.pageList?size>0)>
            	<div class="tcdPageCode"></div>
            </#if>
        </div>
    </div>
    <!-- 贷款记录详情-->
	<div class="jump_bg" id="borrowDetail" style="display: none;">
		<div class="jump_box">
			<div class='jump_title'>
				<span class="jump_title_txt" id="borrow-title"></span>
				<span>用户账户可用余额：<span id="maker_money"></span>元</span>
				<i id='close'>×</i>
			</div>
			<div class="jump_word_gray">
				<table width="100%" border="0" cellspacing="0" cellpadding="0" class="zh_table zh_table1">
				    <thead>
				        <tr style=''>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>期数</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>未还总额</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>未还本金</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>未还利息</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>已还总额</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>已还本金</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>已还利息</th>				            
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>状态</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>理论还款时间</th>
				            <th style='border-bottom:1px solid #ddd;border-right:1px solid #ddd;'>实际还款时间</th>
				            <th style='border-bottom:1px solid #ddd;'>操作</th>
				        </tr>
				    </thead>
				    <tbody id="borrowTbody">
				    </tbody>
				</table>   
			</div>
		</div>
	</div>
	<!-- 加载图片Start -->                        
    <div class="overlay"></div>
	<div id="AjaxLoading" class="showbox">
	    <div class="loadingWord"><img src="/static/front/images/waiting.gif">还款处理中，请稍候...</div>
	</div>
	<div style="height:200px;"></div>
	<!-- 加载图片End -->
	<script type='text/javascript'>
		var box = document.getElementById('borrowDetail');
		var close = document.getElementById('close');
		close.onclick=function(){
			box.style.display='none';
		};
	</script>
    <div id="footer">
      <div class="content">      
		<#include "../base/foot.ftl" />
      </div>
    </div>       
</div>
<script type="text/javascript" src="${_front_js}/jquery.page.js"></script>
<script type="text/javascript" src="${_front_js}/tabs.js"></script>
<script type="text/javascript" src="/static/script/common.js"></script>
<script type="text/javascript" src="${_front_js}/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="${_front_js}/date.js"></script>
<script type="text/javascript" src="${_front_js}/layer/layer.js" ></script>
<script type="text/javascript" src="${_front_js}/layer/extend/layer.ext.js" ></script>
<script type="text/javascript">
	$(".tcdPageCode").createPage({
	    pageCount:${pageInfo.pages},//总页数
	    current:${pageInfo.index},
	    backFn:function(index){
	        window.location.href="/account/loan?publishTimeBegin=<#if publishTimeBegin?exists>${publishTimeBegin}</#if>&publishTimeEnd=<#if publishTimeEnd?exists>${publishTimeEnd}</#if>&type=<#if type?exists>${type}</#if>&index="+index;
	    }
	});
	$(".TabOne").click(function(){
		var temp = $(this).attr("data");
		window.location="/account/loan?type="+temp;
	})
	$(".TabTwo").click(function(){
		var temp = $(this).attr("data");
		window.location="/account/loan?type="+temp;
	})
	
	$(".jump_cancel,.jump_close").click(function(){
			$("#borrowDetail").hide();
		});
		
	function layerConfirm(conMsg, conYes , conTit , conNo) {
	    return layer.confirm(conMsg,conYes,conTit,conNo);
	}
	
	$("#search").click(function(){
		var publishTimeBegin = $("#publishTimeBegin1").val();
		var publishTimeEnd = $("#publishTimeEnd1").val();
		var applyType = $("#applyType option:selected").val();
		window.location="/account/loan?publishTimeBegin="+publishTimeBegin+"&publishTimeEnd="+publishTimeEnd+"&productId="+applyType+"&type=${type}";
	})
	
	//贷款记录
	function borrowDetail(borrowId,userId){
		$.ajax({
            type: "POST",
            url:"/invest/showBorrowDetail",
            data:{
            	"borrowId":borrowId,
            	"userId":userId
            },
            async: false,
            success: function(result){
            	if(result.code==-1){
	            	var entityList=result.entity;
	            	var html="";
	            	for(var i=0;i<entityList.length;i++){
	            		var paymentId = entityList[i].paymentId;
	            		html+="<tr>";
	            		var temp="";
	            		if(entityList[i].status=="Y"){
	            			temp="已还款";
	            		}else{
	            			temp="未还款";
	            		}
	            		html+= "<td>"+entityList[i].periodIndex+"</td>";
						html+= "<td>￥"+entityList[i].notPaymentTotal+"</td>";
						html+= "<td>￥"+entityList[i].notPaymentFund+"</td>";
						html+= "<td>￥"+entityList[i].notPaymentInterest+"</td>";
            			html+= "<td>￥"+entityList[i].paymentTotal+"</td>";
						html+= "<td>￥"+entityList[i].paymentFund+"</td>";
						html+= "<td>￥"+entityList[i].paymentInterest+"</td>";							
						html+= "<td>"+temp+"</td>";
						html+= "<td>"+formatDate(new Date(entityList[i].expectDate))+"</td>";		
						if(entityList[i].status=="Y"){    
							html+= "<td>"+formatDate(new Date(entityList[i].actualDate))+"</td>";
						}else{
	            			html+= "<td></td>";
	            		}
						if(entityList[i].status=="N"){
							html+="<td style='border-right:0px'><input type='button' value='还款' id='repay-submit' style='height:27px;width:53px;border-radius:2px;border:#4db0c2 1px solid;background: #5dc0d2;color: #fff;cursor:pointer;' class='' onclick='javascript:repaySubmit("+entityList[i].id+","+entityList[i].borrowId+","+entityList[i].userId+")'></td>";
						}else{
							html+="<td style='border-right:0px'></td>";
						}
            			html+="</tr>";
            			$("#borrow-title").html(entityList[i].title);
            			$("#maker_money").html(entityList[0].balance);
	            	}
	            	$("#borrowTbody").html(html);
					$("#borrowDetail").show();
            	}else{
            		layer.msg(result.msg);
            	}
            }
        });    		
	}
	
	//还款
	function repaySubmit(paymentId,borrowId,userId){
		layerConfirm("是否确认还款?", function (index) {
			//稍等后图片出现
			$(".overlay").css({'display':'block','opacity':'0.8'});
			$(".showbox").stop(true).animate({'margin-top':'300px','opacity':'1'},200);
			console.log("show");
	        $.ajax({
	            type: "POST",
	            url:"/invest/payment",
	            data:{
	            	"pid":paymentId,
	            	"borrowId":borrowId,
	            	"userId":userId
	            },
	            async: false,
	            success: function(result) {
	            	if(result.code == -1){
				        $.ajax({
				            type: "POST",
				            url:"/fuion/repay",
				            data:{
				            	"paymentId":paymentId
				            },
				            async: false,
				            success: function(result) {
				            	setTimeout(function(){
									//稍等后图片消失
									$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
									$(".overlay").css({'display':'none','opacity':'0'});
					            	if(result.code == -1){
										layer.alert("操作成功!",function(index){
				                    		layer.close(index);
				                    		window.location.reload();
				                    	});  
					            	}else{
					            		layer.alert(result.msg);
					            	}
					            },3000);
				        	}
			        	});
	            		return ;
	            	}else{
	            		setTimeout(function(){
		            		//稍等后图片消失
							$(".showbox").stop(true).animate({'margin-top':'250px','opacity':'0'},400);
							$(".overlay").css({'display':'none','opacity':'0'});
		            		layer.alert(result.msg);
	            		},2000);
	            	}
	        	}
        	});
    	});
	}
</script>
</body>
</html>
